<template>
  <div class="" style="padding: 24px; background: #ffffff; margin: 24px 16px 0">
    <el-table :data="list" style="width: 100%" v-loading="loading" row-key="label_id"
      :tree-props="{ children: 'children' }" default-expand-all>
      <el-table-column prop="configname" label="" align="left">
      </el-table-column>
      <el-table-column prop="typename" align="center"> </el-table-column>
      <el-table-column prop="typename" align="center">
        <template slot-scope="{ row }">
          <el-checkbox @change="(e)=>changeChecked(e,row)" v-model="row.checked" v-if="!row.children"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button @click="handleItem(row)" type="text">{{
      row.children ? "新增" : "编辑"
    }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
        <el-form-item label="" prop="typename">
          <el-input v-model="ruleForm.typename" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')""
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getMeetingTypeList, editMeeting, addMeeting,edittypestatus } from "@/api/setting";
export default {
  data() {
    return {
      title: '', loading: true, list: [], rules: { typename: [{ required: true, message: '请输入', trigger: 'blur' }] },
      ruleForm: { id: null, pid: null, status: 1, typename: '', }, dialogVisible: false,
    };
  }, methods: {
    changeChecked (e,item) {
      edittypestatus({id:item.id})
    },
    submitForm
      (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let api = this.ruleForm.id ? editMeeting(this.ruleForm) : addMeeting(this.ruleForm)
            api.then(res => {
              this.loading = true;
              this.ruleForm.id = ''
              this.ruleForm.typename = ''
              this.dialogVisible = false;
              this.$modal.msgSuccess(res.msg);
              this.getList();
            })
          } else {
            return false;
          }
        });
    },
    handleItem(item) {

      if (item.children) {
        this.title = '新增'
        this.ruleForm.pid = item.id;
      } else {
        this.title = '编辑'
        this.ruleForm.id = item.id
        this.ruleForm.typename = item.typename
      }
      this.dialogVisible = true;
    },
    getList() {
      getMeetingTypeList().then((res) => {
        res.data.forEach(item=>{
          if (item.children) {
            item.children.forEach(em=>{
            em.checked = em.status == 1 ? true : false
          })
          }


        })
        this.list = res.data;
        this.loading = false;
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
  ::v-deep .el-checkbox__inner {
    border: 1px solid #FF4D4F;
  }
</style>
